<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="js/vue.js"></script>
</head>

<body>
	<div id="app">
		<p>{{prices}}</p>
	</div>

	<script>
		var app = new Vue({
			el: '#app',
			data() {
				return {
					package1: [
						{
							name: 'iphone 7',
							price: 7199,
							count: 2
						},
						{
							name: 'ipad',
							price: 2888,
							count: 1
						}
					],
					package2: [
						{
							name: 'iphone 7',
							price: 3,
							count: 5
						},
						{
							name: 'banana',
							price: 2,
							count: 10
						},
					]
				}
			},
			computed: {
				prices() {
					let price = 0;
					this.package1.forEach(item => {
						price += item.price * item.count;
					});
					this.package2.forEach(item => {
						price += item.price * item.count;
					});

					return price;
				}
			}
		})
	</script>
</body>

</html>